<template>
	<view class="content"> 
	<view class="item" v-for="(item,index) in classList" :key="index" @tap="jumpPage(item)">
		<image class="img" :src="item.imgurl" mode="aspectFill"></image>
		<view class="msg-box">
			<view class="text">{{item.className}}</view>
			<view class="count">共有{{item.count}}篇文章</view>
			
		</view>
	</view>
	</view>
</template>

<script>
export default {
	data() {
		return { 
			classList:[{
				imgurl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F5455716%2F58e6be5ed14b4b18bb3a7c227fb0eb2e.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNTQ1NTcxNi81OGU2YmU1ZWQxNGI0YjE4YmIzYTdjMjI3ZmIwZWIyZS5qcGc%3D%2Fsign%2Facf618cdf09d1493c0d18edc4abc1052.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647393718&t=94dc3f41e46a5fe1713488243dfc00c9',
				id:1,
				className:'诗和远方', 
				count:5,
			}]
		};
	},
	onLoad() {
		while(this.classList.length < 10) {
			this.classList.push(this.classList[0]);
		}
		
	},
	methods: {
		jumpPage(item){
			console.log(item)
			uni.navigateTo({
				url:"../classification/index?item="+JSON.stringify({id:item.id,className:item.className})
			})
		}
		
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%; 
	padding: 20upx;
	box-sizing: border-box;
	.item{
		width: 100%;
		background-color: #FFFFFF;			
		padding: 20upx;
		overflow: hidden;
		box-sizing: border-box;
		margin-bottom: 40upx;
		.img{
			width: 100%;
			height: 300upx;

		}
		.msg-box{
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 60upx;
			line-height: 60upx;
			.count{
				font-size: 0.8rem;
				color: #666;
			}
		}
		
	}
}
</style>
